<template>
    <div class="box-container">
        <!-- 搜索 -->
        <el-card>
            <div class="top-main">
            <el-form  class="top-form-fl" :model="form" label-width="auto" :inline="true">
                <el-form-item label="企业名称:">
                    <el-input v-model.trim="param.name" placeholder="请输入企业名称" clearable/>
                </el-form-item>
                <el-form-item label="法定代表人:">
                    <el-input v-model="param.identity" placeholder="请输入法定代表人" clearable/>
                </el-form-item>
                <el-form-item label="审核日期:" style="width:400px">
                    <el-col :span="11">
                        <el-date-picker v-model="param.beginExamineTime" type="date" placeholder="选择开始日期"
                            style="width: 100%" />
                    </el-col>
                    <el-col :span="2" class="text-center">
                        <span class="text-gray-500">-</span>
                    </el-col>
                    <el-col :span="11">
                        <el-date-picker v-model="param.endExamineTime" type="date" placeholder="选择结束日期"
                            style="width: 100%" />
                    </el-col>
                </el-form-item>
                <el-form-item label="注册日期:" style="width:400px">
                    <el-col :span="11">
                        <el-date-picker v-model="param.beginCreateTime" type="date" placeholder="选择开始日期"
                            style="width: 100%" />
                    </el-col>
                    <el-col :span="2" class="text-center">
                        <span class="text-gray-500">-</span>
                    </el-col>
                    <el-col :span="11">
                        <el-date-picker v-model="param.endCreateTime" type="date" placeholder="选择结束日期"
                            style="width: 100%" />
                    </el-col>
                </el-form-item>
                <el-form-item label="法人手机号:">
                    <el-input v-model="param.mobile" placeholder="请输入法人手机号" clearable/>
                </el-form-item>
            </el-form>
            <div class="top-from-fr">
                <el-button class="top-Search" @click="getUserListdata" type="primary">搜索</el-button>
                <el-button class="top-Refresh" @click="resetFrome">重置</el-button>
            </div>   
            </div>
        </el-card>
        <el-card class="marginTop20" style="padding-bottom: 20px;">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="全部" name=""></el-tab-pane>
                <el-tab-pane label="待审核" name="5"></el-tab-pane>
                <el-tab-pane label="已通过" name="10"></el-tab-pane>
                <el-tab-pane label="已驳回" name="15"></el-tab-pane>
                <el-tab-pane label="已过期" name="20"></el-tab-pane>
            </el-tabs>
            <Table v-bind="tableDta" style="width: 100%;" @pageChange="onTablePageChange" @toExamine="toExamine" @reject="setReject" @showInfo="showInfo"></Table>
        </el-card>
        
    </div>
</template>
<script setup lang="ts">
import { reactive, onMounted, ref } from 'vue';
import Table from '@/components/table'
import { getSysCompanyPage, getUserList, getCompanyPage, updateSysCompanyExamineStatus } from '@/api/enterpriseManage/index'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
const param = reactive({
    pageNum:1,
    pageSize:10,
    loading: false,
    name: '',
    identity: '',
    beginExamineTime: '',
    endExamineTime: '',
    beginCreateTime: '',
    endCreateTime: '',
    mobile: '',
    examineStatus:''
})
const tableDta = reactive({
    header: [
        { key: 'name', colWidth: '120', colheight: '80', title: '企业名称', type: '<a>',command: 'showInfo', isCheck: true },
        { key: 'invoiceTaxnum', colWidth: '120', title: '社会统一信用代码', type: 'text', isCheck: true },
        { key: 'identity', colWidth: '60', title: '法定代表人', type: 'text', isCheck: true },
        { key: 'mobile', colWidth: '80', title: '法人手机号', type: 'mobile', isCheck: true },
        { key: 'mainBusiness', colWidth: '70', title: '企业角色', type: 'filter',filter: { 5:'货代公司', 10:'集装箱公司',15:"集卡公司", 20:'堆场公司',null:'--'}, isCheck: true },
        { key: 'createTime', colWidth: '70', title: '注册日期', type: 'date', isCheck: true },
        { key: 'examineTime', colWidth: '70', title: '审核日期', type: 'date', isCheck: true },
        { key: 'examineStartTime',key2: 'examineEndTime', colWidth: '150', title: '认证有效期', type: 'rangeStatus2', isCheck: true },
        { key: 'examineStatus', colWidth: '60', title: '状态', type: 'filter',
          filter: { 5:'待审核', 10:'已通过',15:"已驳回", 20:'已过期',null:'--'},
          cFilter: { 5: '#2158F3', 10: '#22A86D', 15: '#ff0000', 20: '#e9b210' },
          isCheck: true 
        },
        {
            key: 'operate',
            colWidth: '100',
            title: '操作',
            type: 'operate',
            isCheck: true,
            buttons: [
                {
                    // icon: 'EditPen',
                    command: 'toExamine',
                    // content: '审核',
                    name:'审核',
                    // isShow: (row) => {
                    //     return row.id == '5';
                    // }
                },
                {
                    // icon: 'Open',
                    // type: 1,//企业用户 1  企业账号 0 
                    // status: "1",
                    command: 'reject',
                    // content: '驳回',
                    name: '驳回',
                }
            ]
        }
    ],
    data: [],
    config: {
        isSelection: false,
        isList: false,
        isPagination: true, // 是否分页
        total: 0, // 总条数
        loading: false
    },
    // rolePermissionList: from.rolePermissionList// 角色权限列表
})
//清空所有填写搜索信息
const resetFrome = () => {
    param.name = null
    param.identity = null
    param.beginExamineTime = null
    param.endExamineTime = null
    param.beginCreateTime = null
    param.endCreateTime = null
    param.mobile = null
}
onMounted(() => {
    getUserListdata()
})
const getUserListdata = () => {
    const data = {
        pageNum: param.pageNum,
        pageSize: param.pageSize,
        companyName: param.name,
        identity: param.identity,
        mobile: param.mobile,
        beginExamineTime: param.beginExamineTime, //审核开始日期
        endExamineTime: param.endExamineTime, // 审核结束日期
        beginCreateTime: param.beginCreateTime,
        endCreateTime: param.endCreateTime,
        examineStatus: param.examineStatus,
    }
    getCompanyPage(data).then(res => {
        tableDta.data = res.data.list
        tableDta.config.total = res.data.total
    })
}

// 审核
const toExamine = (row) =>{
    console.log("row",row)
    if(row.id == '1' || row.id == '6') return ElMessage.warning('内部账号，禁止该操作')
    const data = { id: row.id, examineStatus: 10, rejectReason: '' }
    updateSysCompanyExamineStatus(JSON.stringify(data)).then(res => {
        getUserListdata()
        ElMessage({
            type: 'success',
            message: '通过操作成功',
        })
    })
}
//驳回
const setReject = (row) => {
    if(row.id == '1' || row.id == '6') return ElMessage.warning('内部账号，禁止该操作')
    ElMessageBox.prompt('请输入驳回原因', '您确定要驳回该条申请吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '关闭',
        inputPattern: /\S/,
        inputErrorMessage: '驳回原因',
    }).then(({ value }) => {
        const data = { id: row.id, examineStatus: 15, rejectReason: value }
        updateSysCompanyExamineStatus(JSON.stringify(data)).then(res => {
            getUserListdata()
            ElMessage({
                type: 'success',
                message: '驳回申请成功',
            })
        }).cache(() => {
            ElMessage({
                type: 'info',
                message: '驳回申请失败1',
            })
        })
    }).catch(() => {
        // ElMessage({
        //     type: 'info',
        //     message: '终止驳回操作',
        // })
    })
}
//tab 切换
const activeName = ref('')
const handleClick = (tab,event) =>{
    activeName.value = tab.paneName
    param.examineStatus = tab.paneName
    getUserListdata()
}
//跳转详情
const router = useRouter()
const showInfo = (row) => {
    router.push({
    path: '/platformManagement/enterpriseDetails',
    query: { id: row.id }
  })
}
//分页
function onTablePageChange(page) {
  param.pageNum = page.pageNum;
  param.pageSize = page.pageSize;
  getUserListdata()
};

</script>
<style scoped lang="scss">
.box-container{
    padding: 20px;
}
</style>